<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        用户名： <input type="text" id="username"><br>
        密码：  <input type="text" id="password"><br>
        <button class="btn1">get方式提交</button><br>
        <button class="btn2">POST方式提交</button>
    </div>
    <script src="../js/ajax.js"></script> <!--   在使用     ajax   之 前 引 入 ajax  的封装文件   -->
    <script>
        let btn1Ele = document.querySelector(".btn1");
        let btn2Ele = document.querySelector(".btn2");
        let usernameEle = document.querySelector("#username");
        let passwordEle = document.querySelector("#password");
        btn1Ele.onclick = function (){               //先写一个点击事件
            let username = usernameEle.value;       //获取input框我们需要的value值
            let pwd = passwordEle.value;            //获取input框我们需要的value值
            ajax({
                url:'../php/get.php',     //目标文件的地址
                method:'get',              //ajax传输方式 
                dataType:'json',            //数据格式    json和text   ，默认为text   为字符串
                data:{                      //需要传过去的数据
                    username:username,      
                    pwd:pwd,
                },
                success(res){           //传回来的结果
                    // console.log(res);
                    if( res['status'] == 1 ){
                        window.location.href = 'http://www.baidu.com';
                    } else {
                        window.alert(res['info']);
                    }
                }
            });
        }
        btn2Ele.onclick = function (){               //先写一个点击事件
            let username = usernameEle.value;       //获取input框我们需要的value值
            let pwd = passwordEle.value;            //获取input框我们需要的value值
            ajax({
                url:'../php/post.php',         //目标地址
                method:'post',              //传输数据的方式
                dataType:'json',        //数据格式
                data:{                  //需要传输的数据
                    username:username,
                    pwd:pwd,
                },
                success(res){           //传回来的结果
                    // console.log(res);
                    if( res['status'] == 1 ){
                        window.location.href = 'http://www.baidu.com';
                    } else {
                        window.alert(res['info']);
                    }
                }
            });
        }
    </script>
</body>
</html>